<template>
  <!-- 英雄区 -->
  <section
    class="pt-24 md:pt-32 pb-12 md:pb-20 bg-gradient-to-br from-primary/5 to-white"
  >
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex flex-col md:flex-row items-center">
        <div class="md:w-1/2 mb-8 md:mb-0">
          <h1
            class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-dark"
          >
            发现<span class="text-primary">音乐</span>的无限可能
          </h1>
          <p class="mt-4 text-lg text-neutral max-w-xl">
            探索超过 100,000
            份高品质乐谱，从古典到流行，满足每位音乐爱好者的需求。
          </p>
          <div class="mt-8 flex flex-wrap gap-4">
            <a
              href="#featured"
              class="px-6 py-3 bg-primary text-white rounded-lg shadow-lg hover:shadow-xl hover:bg-primary/90 transition-custom flex items-center"
            >
              <span>立即探索</span>
              <i class="fa fa-arrow-right ml-2"></i>
            </a>
            <a
              href="#categories"
              class="px-6 py-3 bg-white text-primary border border-primary rounded-lg hover:bg-gray-50 transition-custom flex items-center"
            >
              <i class="fa fa-music mr-2"></i>
              <span>浏览分类</span>
            </a>
          </div>
          <div class="mt-8 flex items-center space-x-6">
            <div class="flex items-center">
              <div class="flex -space-x-2">
                <img
                  src="https://picsum.photos/200/200?random=1"
                  alt="用户头像"
                  class="w-10 h-10 rounded-full border-2 border-white"
                />
                <img
                  src="https://picsum.photos/200/200?random=2"
                  alt="用户头像"
                  class="w-10 h-10 rounded-full border-2 border-white"
                />
                <img
                  src="https://picsum.photos/200/200?random=3"
                  alt="用户头像"
                  class="w-10 h-10 rounded-full border-2 border-white"
                />
              </div>
              <span class="ml-2 text-sm text-neutral">10,000+ 活跃用户</span>
            </div>
            <div class="flex items-center">
              <div class="flex text-yellow-400">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star-half-o"></i>
              </div>
              <span class="ml-2 text-sm text-neutral">4.8/5 评分</span>
            </div>
          </div>
        </div>

        <div class="md:w-1/2 relative">
          <div class="relative z-10 rounded-xl overflow-hidden shadow-2xl">
            <!-- 轮播图组件 -->
            <el-carousel
              :interval="3000"
              type="card"
              height="400px"
              class="w-full aspect-[4/3]"
            >
              <el-carousel-item
                v-for="(image, index) in swiperList"
                :key="index"
              >
                <div class="relative w-full h-full">
                  <img
                    :src="HttpManager.attachImageUrl(image.pic)"
                    :alt="`轮播图 ${index + 1}`"
                    class="w-full h-full object-cover"
                  />
                  <div
                    class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end"
                  >
                    <div class="p-6">
                      <span
                        class="inline-block px-3 py-1 bg-secondary text-white text-sm font-medium rounded-full mb-3"
                        >精选推荐</span
                      >
                      <h3 class="text-white text-xl font-bold">精彩音乐内容</h3>
                      <p class="text-white/80 mt-1">探索更多音乐世界</p>
                    </div>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
          <div
            class="absolute -bottom-6 -left-6 w-32 h-32 bg-primary/20 rounded-full blur-3xl -z-10"
          ></div>
          <div
            class="absolute -top-6 -right-6 w-40 h-40 bg-secondary/20 rounded-full blur-3xl -z-10"
          ></div>
        </div>
      </div>
    </div>
  </section>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import HttpManager from '@/api';
  import { ResponseBody } from '@/types';

  const swiperList = ref<string[]>([]);
  // 根据需要添加交互逻辑
  HttpManager.getBannerList().then((res) => {
    swiperList.value = (res as ResponseBody).data.sort();
    console.log(swiperList.value);
  });
</script>
